<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>程序员梗生成器 - AI Agent开发指南</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        
        /* 首字下沉效果 */
        .drop-cap::first-letter {
            float: left;
            font-size: 4rem;
            line-height: 3rem;
            padding-right: 0.5rem;
            margin-top: 0.5rem;
            font-weight: 700;
            color: #667eea;
            font-family: 'Noto Serif SC', serif;
        }
        
        /* 代码块样式 */
        .code-block {
            background: linear-gradient(135deg, #1e1e2e 0%, #2d2d44 100%);
            border-radius: 12px;
            padding: 1.5rem;
            position: relative;
            overflow: hidden;
        }
        
        .code-block::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #667eea, #764ba2, #f093fb);
            animation: gradient-shift 3s ease infinite;
        }
        
        @keyframes gradient-shift {
            0%, 100% { transform: translateX(-100%); }
            50% { transform: translateX(100%); }
        }
        
        /* 卡片悬停效果 */
        .hover-card {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .hover-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }
        
        /* 步骤编号样式 */
        .step-number {
            background: linear-gradient(135deg, #667eea, #764ba2);
            width: 2.5rem;
            height: 2.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            color: white;
            font-weight: 700;
            flex-shrink: 0;
        }
        
        /* 图片容器样式 */
        .image-container {
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }
        
        .image-container:hover {
            transform: scale(1.02);
        }
        
        /* 标题装饰线 */
        .title-decoration {
            height: 4px;
            background: linear-gradient(90deg, #667eea, #764ba2);
            border-radius: 2px;
            margin-bottom: 1rem;
        }
        
        /* 引用样式 */
        .quote-block {
            border-left: 4px solid #667eea;
            padding-left: 1.5rem;
            position: relative;
        }
        
        .quote-block::before {
            content: '"';
            position: absolute;
            left: -10px;
            top: -20px;
            font-size: 4rem;
            color: #667eea;
            opacity: 0.2;
            font-family: 'Noto Serif SC', serif;
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-purple-900 via-purple-800 to-indigo-900"></div>
        <div class="absolute inset-0 bg-black opacity-20"></div>
        <div class="relative container mx-auto px-6 py-24">
            <div class="text-center text-white">
                <div class="inline-flex items-center mb-6 bg-white bg-opacity-20 backdrop-blur-sm rounded-full px-6 py-2">
                    <i class="fas fa-robot mr-2"></i>
                    <span class="text-sm font-medium">基于扣子空间的AI Agent开发</span>
                </div>
                <h1 class="text-5xl md:text-7xl font-bold mb-6 leading-tight">
                    程序员梗生成器
                    <span class="block text-3xl md:text-4xl mt-4 font-normal text-purple-200">让代码也能讲笑话</span>
                </h1>
                <p class="text-xl text-purple-100 max-w-3xl mx-auto mb-10">
                    一个基于扣子空间的AI Agent，专为程序员打造的幽默生成器。输入编程语言或技术主题，即可获得令人会心一笑的程序员梗，让技术交流充满乐趣。
                </p>
                <div class="flex flex-wrap justify-center gap-4">
                    <a href="#start" class="bg-white text-purple-800 px-8 py-4 rounded-full font-semibold hover:bg-purple-100 transition-all transform hover:scale-105 inline-flex items-center">
                        <i class="fas fa-play-circle mr-2"></i>
                        开始创建
                    </a>
                    <a href="#demo" class="border-2 border-white text-white px-8 py-4 rounded-full font-semibold hover:bg-white hover:text-purple-800 transition-all inline-flex items-center">
                        <i class="fas fa-eye mr-2"></i>
                        查看演示
                    </a>
                </div>
            </div>
        </div>
        <div class="absolute bottom-0 left-0 right-0">
            <svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 120L60 110C120 100 240 80 360 70C480 60 600 60 720 65C840 70 960 80 1080 85C1200 90 1320 90 1380 90L1440 90V120H1380C1320 120 1200 120 1080 120C960 120 840 120 720 120C600 120 480 120 360 120C240 120 120 120 60 120H0V120Z" fill="white"/>
            </svg>
        </div>
    </section>

    <!-- Main Content -->
    <main class="bg-white">
        <!-- Introduction Section -->
        <section class="container mx-auto px-6 py-16">
            <div class="max-w-4xl mx-auto">
                <div class="bg-gradient-to-r from-purple-50 to-indigo-50 rounded-2xl p-8 mb-12 hover-card">
                    <div class="flex items-start">
                        <div class="mr-6">
                            <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-2xl flex items-center justify-center text-white text-2xl">
                                <i class="fas fa-lightbulb"></i>
                            </div>
                        </div>
                        <div class="flex-1">
                            <h3 class="text-2xl font-bold text-gray-800 mb-3">什么是程序员梗生成器？</h3>
                            <p class="text-gray-600 leading-relaxed drop-cap">
                                程序员梗生成器是一个基于扣子空间（https://space.coze.cn/）的AI Agent，旨在为程序员生成幽默的编程相关梗或笑话。用户可以输入编程语言（如Python、JavaScript）或技术主题（如调试、算法），Agent会生成一段搞笑的文本，适合分享到飞书、微信或Discord。这个应用简单有趣，易于上手，适合初学者体验AI开发。
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Features Grid -->
                <div class="grid md:grid-cols-3 gap-6 mb-16">
                    <div class="bg-white rounded-xl shadow-lg p-6 hover-card">
                        <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
                            <i class="fas fa-laugh-beam text-purple-600 text-xl"></i>
                        </div>
                        <h4 class="font-bold text-lg mb-2">智能幽默生成</h4>
                        <p class="text-gray-600 text-sm">基于AI大模型，理解编程文化，生成贴合程序员日常的幽默内容</p>
                    </div>
                    <div class="bg-white rounded-xl shadow-lg p-6 hover-card">
                        <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
                            <i class="fas fa-share-alt text-indigo-600 text-xl"></i>
                        </div>
                        <h4 class="font-bold text-lg mb-2">多平台分享</h4>
                        <p class="text-gray-600 text-sm">支持飞书、微信、Discord等平台，一键分享给技术小伙伴</p>
                    </div>
                    <div class="bg-white rounded-xl shadow-lg p-6 hover-card">
                        <div class="w-12 h-12 bg-pink-100 rounded-lg flex items-center justify-center mb-4">
                            <i class="fas fa-rocket text-pink-600 text-xl"></i>
                        </div>
                        <h4 class="font-bold text-lg mb-2">快速上手</h4>
                        <p class="text-gray-600 text-sm">无需编程基础，通过可视化工作流即可创建自己的AI Agent</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Steps Section -->
        <section id="start" class="bg-gray-50 py-16">
            <div class="container mx-auto px-6">
                <div class="max-w-4xl mx-auto">
                    <div class="text-center mb-12">
                        <h2 class="text-4xl font-bold text-gray-800 mb-4">详细步骤</h2>
                        <div class="w-24 h-1 bg-gradient-to-r from-purple-500 to-indigo-600 mx-auto"></div>
                    </div>

                    <!-- Step 1 -->
                    <div class="bg-white rounded-2xl shadow-xl p-8 mb-8">
                        <div class="flex items-center mb-6">
                            <div class="step-number">1</div>
                            <h3 class="text-2xl font-bold ml-4">登录并创建新Agent</h3>
                        </div>
                        
                        <div class="space-y-6">
                            <div class="quote-block">
                                <h4 class="font-semibold text-lg mb-3">访问扣子空间：</h4>
                                <ul class="space-y-2 text-gray-600">
                                    <li class="flex items-start">
                                        <i class="fas fa-check-circle text-purple-500 mt-1 mr-3"></i>
                                        <span>打开浏览器，前往 <a href="https://www.coze.cn/" class="text-purple-600 hover:underline">https://www.coze.cn/</a></span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-check-circle text-purple-500 mt-1 mr-3"></i>
                                        <span>使用飞书账号或邀请码登录（内测阶段可能需要邀请码）</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-check-circle text-purple-500 mt-1 mr-3"></i>
                                        <span>进入扣子开发平台</span>
                                    </li>
                                </ul>
                            </div>
                            
                            <div class="image-container">
                                <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1753536370465-b7861666-2cf4-46fa-a21c-49170523c41f.png" alt="扣子平台登录" class="w-full">
                            </div>

                            <div class="quote-block mt-8">
                                <h4 class="font-semibold text-lg mb-3">创建新Agent：</h4>
                                <ul class="space-y-2 text-gray-600">
                                    <li class="flex items-start">
                                        <i class="fas fa-check-circle text-purple-500 mt-1 mr-3"></i>
                                        <span>在左侧导航栏点击"创建Agent"</span>
                                    </li>
                                </ul>
                            </div>

                            <div class="image-container">
                                <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1753536423316-f9101a77-9754-47fc-ac85-b2f0fd662ffd.png" alt="创建Agent" class="w-full">
                            </div>

                            <ul class="space-y-2 text-gray-600 mt-6">
                                <li class="flex items-start">
                                    <i class="fas fa-check-circle text-purple-500 mt-